<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import lines from "@/data/odline-migration"

export default {
  name: "AddOdlineMigration.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      map.setZoom(6)

      // lines is the data from odline-migration.js
      let lineLayer = new maptalks.ODLineLayer(MapLayerConst.MAP_OD_LINE_BASE_LAYER, lines, {
        "animation": false,
        "curveness": 0,
        "globalCompositeOperation": "lighter",
        "symbol": {
          "lineWidth": 2,
          "lineColor": "rgba(2, 166, 253, 0.03)",
        }
      }).addTo(map);

      // animated OD Lines
      let layer = new maptalks.ODLineLayer(MapLayerConst.MAP_OD_LINE_ANIMATED_LAYER, lines, {
        "animationDuration": 30000,
        "animation": true,
        "curveness": 0,
        "random": true,
        "trail": 10,
        "symbol": {
          "lineColor": "#fff"
        }
      }).addTo(map);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>